import React, { useEffect, useState } from 'react';
import { getUserInfo } from '@inbiz/utils';
import { useInbizRouter } from '@inbiz/hooks';
import Infomation from './Infomation';
import BaseInfo from './BaseInfo';
import Password from './Password';
import { getStrategy } from './service';
import styles from './style.less';

interface Props {
  mobileconfigList: {
    icon: {
      type: string;
    };
    title: string;
    link: string;
    id: string;
    externalAddress: boolean;
    hide: boolean;
    isDel: boolean;
    isHide: boolean;
    isEdit: boolean;
  }[];
  text: string;
  className: string;
}

/**
 * InbizInfomation 组件
 */
const InbizInfomation: React.FC<Props> = (props) => {
  const [pwdData, $pwdData] = useState({
    length: 8,
    enableEditUserInfo: true,
    enableEditPwd: true,
  });

  const { className } = props || {};
  const userInfoByToken = getUserInfo().userInfoByToken;
  const [userInfo, $userInfo] = useState(userInfoByToken);

  const inbizRouter = useInbizRouter();
  const routeArr = inbizRouter.location.pathname.split('/');
  const routeParams = routeArr[routeArr.length - 1];
  const getComponent = () => {
    let component = null;
    switch (routeParams) {
      case 'base':
        component = <BaseInfo pwdData={pwdData} userInfo={userInfo} $userInfo={$userInfo} />;
        break;
      case 'pass':
        component = <Password pwdData={pwdData} />;
        break;
      default:
        component = <Infomation {...props} userInfo={userInfo} $userInfo={$userInfo} />;
        break;
    }
    return component;
  };
  useEffect(() => {
    getStrategy().then((res) => {
      if (res.nResult == 0) {
        $pwdData({
          length: res.result.length,
          enableEditUserInfo: res.result.enableEditUserInfo,
          enableEditPwd: res.result.enableEditPwd,
        });
      }
    });
  }, []);
  return <div className={`${styles.infomationContainer} ${className}`}>{getComponent()}</div>;
};
export default InbizInfomation;
